<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>IB</title>
        <style type="text/css">
            #citroen {
                position: relative;
            }
            #suggestion {
                position: absolute;
                border: 1px solid black;
                left: 0;
                top: 25px;
                width: 200px;
            }
        </style>
    </head>
    <body><%
        if (session.getAttribute("result") == null) {
        %>
        <h1>Hello World!</h1>
        <div id="citroen">
            City : <input type="text" id="city" name="city" onkeyup="lookCity(this)" autocomplete="off"/>
            <button id="button" disabled="disabled" onclick="return Submit()">Submit</button>
            <div id="suggestion" style="display:none">as</div>
        </div>
        <div id="result"></div>
        <div id="iPinkWEKAResult"></div>
        <script type="text/javascript" src="api.js"></script>
        <script type="text/javascript">
            document.getElementById("button").removeAttribute("disabled");
            function getXmlHttpRequest() {
                var xmlHttpObj;
                if (window.XMLHttpRequest) {
                    xmlHttpObj = new XMLHttpRequest();
                } else {
                    try {
                        xmlHttpObj = new ActiveXObject("Msxml2.XMLHTTP");
                    } catch (e) {
                        try {
                            xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
                        } catch (e) {
                            xmlHttpObj = false;
                        }
                    }
                }
                return xmlHttpObj;
            }
            function lookCity(el) {
                var xmlhttp = getXmlHttpRequest();
                xmlhttp.open("GET","city.jsp?q="+el.value+"&r="+Math.random(),true);
                xmlhttp.send();
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        if (xmlhttp.responseText == "") {
                            document.getElementById("suggestion").setAttribute("style","display:none");
                        } else {
                            var response = xmlhttp.responseText.split("$");
                            var innerHTML = "";
                            for (i = 0; i < response.length-1; i++) {
                                innerHTML += "<div><a href=\"#\" onclick=\"return selectCity(this)\">"+response[i]+"</a></div>";
                            }
                            document.getElementById("suggestion").innerHTML = innerHTML;
                            document.getElementById("suggestion").removeAttribute("style");
                        }
                    }
                };
            }
            function selectCity(el) {
                document.getElementById("city").value = el.innerHTML;
                document.getElementById("suggestion").setAttribute("style","display:none");
                return false;
            }
            function Submit() {
                iPinkWEKA("Hati-hati di kota anda banyak pemerkosa");
                return false;
            }
        </script><%
        } else {
            out.print(session.getAttribute("result"));
            session.removeAttribute("result");
        }
    %></body>
</html>
